import React, { Component } from "react";
import { connect } from "react-redux";
import { getHotCitys } from "../store/actionCreators";

class Hello extends Component {
  // componentDidMount() {
  //   // 调用接口
  //   fetch("https://m.maizuo.com/gateway", {
  //     headers: {
  //       "X-Host": "mall.film-ticket.city.list",
  //     },
  //   })
  //     .then((response) => response.json())
  //     .then((resp) => {
  //       console.log("resp", resp);
  //       const arr = resp.data.cities.filter((item) => item.isHot === 1);
  //       console.log("arr", arr);
  //       const arr2 = arr.map((item) => item.name);
  //       console.log("arr2", arr2);

  //       // 写入到 redux
  //       this.props.dispatch({ type: "SET", payload: arr2 });
  //     });
  // }

  componentDidMount() {
    // 直接派发一个函数动作
    this.props.dispatch(getHotCitys);
  }

  render() {
    const { hotCitys } = this.props;

    return (
      <div>
        <h2>Hello - 热门城市</h2>
        <ul>
          {hotCitys.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default connect((state) => ({
  hotCitys: state.citys,
}))(Hello);
